<template>
  <h1>
    {{ pageQuery }}
  </h1>

  <MPagination
      :value="pageQuery.page"
      :limit="pageQuery.limit"
      :total="pageQuery.total"
      @change="handlePageChange"
      size="large"
      :disabled="true"
      :pageSlot="9"
  />


</template>

<script lang="ts">

import {defineComponent, reactive} from "vue";

export default defineComponent({
  components: {

  },
  setup() {
    const pageQuery = reactive({
      page: 1,
      total: 1000,
      limit: 10
    })

    const handlePageChange = (curPage, size) => {
      pageQuery.page = curPage;
      pageQuery.limit = size;

    }

    return {
      pageQuery,
      handlePageChange
    }
  }
})

</script>